<template>
  <div>
    <alert v-model="show" title="提示" @on-show="onShow" @on-hide="onHide">{{message}}</alert>
    <Yq-header :needBack="true">
      <p slot="content" style="margin-left: -12px">我的收藏</p>
    </Yq-header>
    <div style="margin-bottom: 25px;padding-top: 38px;">
      <div v-if="noList === true" style="text-align: center;line-height: 150;font-size: 15px;">您还没有收藏任何商品</div>
      <card v-for="collectionList in collectionList">
        <div slot="content" class="card-demo-flex card-demo-content01" >
          <flexbox  wrap="nowrap" :gutter="0">
            <flexbox-item :span="1/3" @click.native="shopinfoFn(collectionList)">
              <div style="width: 80px;margin:10px 5px 10px 15px;">
                <x-img :src=collectionList.imgUrl width="100%"></x-img>
              </div>
            </flexbox-item>
            <flexbox-item @click.native="shopinfoFn(collectionList)">
              <flexbox orient="vertical">
                <flexbox-item>
                  <slot name="shopName"><p style="padding-right: 10px;color: #636363;font-size: 13px;">{{collectionList.name}}</p></slot>
                </flexbox-item>
                <flexbox-item>
                  <slot name="left"><span style="font-size: 13px;color: #f53e3e;">￥{{collectionList.nowPrice}}</span></slot>
                </flexbox-item>
              </flexbox>
            </flexbox-item>
            <flexbox-item :span="1.5">
              <p style="float: right;padding-right: 10px;" >
                <img slot="icon" width="17" height="17" style="display:block;margin-right:5px;" src="../../../assets/images/user/del.png" @click="deleteLikeFn(collectionList.itemId)">
              </p>
            </flexbox-item>
          </flexbox>
        </div>
      </card>
    </div>
    <div v-if="hasNext === true" style="text-align: center;line-height: 30px;color: grey;" @click="load2">轻触加载更多···</div>
    <!--<divider v-if="allList === true">我是有底线的</divider>-->
  </div>
</template>
<script>
  import { Clocker, Icon, Group, Checklist, Cell, Flexbox, FlexboxItem, XButton, Scroller, Alert, Card, XImg, Divider } from 'vux'
  import YqHeader from '../../../components/YqHeader.vue'
  import shopList from '../../../components/shopCart/ShopCart_Q.vue'
  import * as urls from '../../../api/urls'

  export default {
    components: {
      Clocker,
      Icon,
      Group,
      Checklist,
      Cell,
      Flexbox,
      XButton,
      FlexboxItem,
      shopList,
      YqHeader,
      Alert,
      Scroller,
      Card,
      XImg,
      Divider
    },
    data () {
      return {
        hasNext: true,
        allList: false,
        show: false,
        message: '',
        type: 'shopCart',
        currentPage: 1,
        collectionList: [],
        shopHeigth: '',
        checklist: [1, 2, 3],
        deleteItemId: '',
        noList: false,
        pageNum: 0,
        pageSize: 10,
        pages: ''
      }
    },
    methods: {
      shopinfoFn (item) {
        window.sessionStorage.setItem('shopId', item.itemId)
        let userId = window.sessionStorage.getItem('userId')
        window.location.href = '/api/wxAuth/go/ShopInfo_id=' + item.itemId + '&userId=' + userId
//        window.sessionStorage.setItem('userId', userId)
//        this.$router.push({
//          path: '/ShopInfo'
//        })
//        this.$router.go(1)
      },
      onHide () {
//        if (this.message === '删除成功') {
//          this.pageNum = 0
//          this.getCollectionList()
//        }
      },
      onShow () {
      },
      load2 () {
        // 加载更多
        this.getCollectionList()
      },
      selectLeft (val) {
        if (val.length === 0) {
          this.checklist = []
        } else {
          document.getElementsByClassName('checkbox')
        }
      },
      getCollectionList () {
        let userId = window.sessionStorage.getItem('userId')
        let that = this
        that.pageNum = that.pageNum + 1
        that.http(urls.userCollection, {userId: userId, currentPage: that.pageNum, pageSize: 10}, function (res) {
          if (res.status === 100) {
            if (res.data.data.list.length === 0) {
              that.noList = true
              that.allList = false
              that.hasNext = false
            } else {
              that.collectionList = res.data.data.list
              that.pageNum = res.data.data.pageNum
              that.pages = res.data.data.pages
              if (res.data.data.hasNextPage === true) {
                that.hasNext = true
              } else {
                that.hasNext = false
                that.allList = true
              }
            }
          } else {
            that.show = true
            that.message = res.errMsg
          }
        }, function (res) {
          that.show = true
          that.message = res.errMsg
        })
      },
      deleteLikeFn (deleteItemId) {
        this.deleteItemId = deleteItemId
        let that = this
        this.$vux.confirm.show({
          title: '提示',
          content: '确定删除该商品吗？',
          confirmText: '确定',
          // 组件除show外的属性
          onConfirm () {
            let userId = window.sessionStorage.getItem('userId')
            that.http(urls.cancelLike, {userId: userId, itemId: that.deleteItemId}, function (res) {
              if (res.status === 100) {
                that.pageNum = 0
                that.getCollectionList()
              } else {
                that.show = true
                that.message = res.errMsg
              }
            }, function (res) {
              that.show = true
              that.message = res.errMsg
            })
          }
        })
      },
      weixinfn6 () {
        let that = this
        let userId = window.sessionStorage.getItem('userId')
        let logo = window.sessionStorage.getItem('LOGO')
        let url = window.location.origin
        let link = url + '/api/wxAuth/index?type=t1' + '&uid=' + userId
        that.$wechat.onMenuShareAppMessage({
          title: '孝行通', // 分享标题
          desc: '孝行通·微商城 一个让子女为父母尽孝的老年服务平台', // 分享描述
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
        that.$wechat.onMenuShareTimeline({
          title: '孝行通', // 分享标题
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
      }
    },
    mounted: function () {
      this.getCollectionList()
      this.weixinfn6()
      this.$root.$children[0].$data.isShowHeader = true // 显示header
      // 可见窗口高度
      let clientHeight = parseInt(document.body.clientHeight)
      // 底部菜单高度
      let bottomHeight = 80
      this.shopHeigth = (clientHeight - bottomHeight) + 'px'
    }
  }
</script>
<style scoped="scoped">
  .vux-flexbox-item>img{
    margin-left: -20px;
  }
</style>
